<template>
	<view class="wrap">
		<view class="search" @click="show = true">
			<u-search v-model="keywords" @custom="search" @search="search " placeholder="请选择厂站"></u-search>
			<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="selectorObj"
				range-key="cateName"></u-picker>
		</view>
		<scroll-view class="scroll-list" scroll-y="true">
			<view class="container">
				<view class="head-text">进水水质</view>
				<u-grid :col="3" :border="false" class="grid">
					<u-grid-item v-for="(item,index) in inflowWater" :key="index">
						<view class="grid-text">{{item.title}}</view>
						<view class="grid-text">{{item.value}}<span>{{item.unit}}</span></view>
					</u-grid-item>
				</u-grid>


				<view class="head-text">出水水质</view>
				<u-grid :col="3" class="grid" :border="false">
					<u-grid-item v-for="(item,index) in outWater" :key="index">
						<view class="grid-text">{{item.title}}</view>
						<view class="grid-text">{{item.value}}<span>{{item.unit}}</span></view>
					</u-grid-item>
				</u-grid>

				<view class="head-text">设备运行状态</view>
				<view class="charts-box">
					<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
				</view>
				<view class="head-text">设备在线状态</view>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="ringOpt" :chartData="ringData" />
				</view>
			</view>


		</scroll-view>
	</view>
</template>
<script>
	// import echarts from 'echarts'

	export default {
		data() {
			return {
				keywords: '',
				//下拉框
				show: true,
				selector: [1, 2, 3],
				multiSelector: [
					[1, 2, 3],
					[4, 5, 6]
				],
				// 这种情况需要指定range-key为cateName，否则组件不知道该显示对象的哪个属性
				selectorObj: [{
						cateName: '1',
						id: 1
					},
					{
						cateName: '2',
						id: 2
					}
				],
				
				//进水水质
				inflowWater: [{
						title: 'COD',
						value: '4.32',
						unit: "mg/L"
					},
					{
						title: 'COD',
						value: '4.32',
						unit: "mg/L"
					},
					{
						title: 'COD',
						value: '4.32',
						unit: "mg/L"
					},
				],
				//出水水质
				outWater: [{
						title: 'COD',
						value: '4.32',
						unit: "mg/L"
					},
					{
						title: 'COD',
						value: '4.32',
						unit: "mg/L"
					},
					{
						title: 'COD',
						value: '4.32',
						unit: "mg/L"
					},
				],
				//pieEcharts
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				//ringEcharts
				ringData: {},
				ringOpt: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				}

			}

		},
		onLoad() {

		},
		onReady() {
			this.getServerData();
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			search(value) {
				this.$u.toast('搜索内容为：' + value)
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "运行",
								"value": 50
							}, {
								"name": "停止",
								"value": 30
							}, {
								"name": "异常",
								"value": 20
							}, {
								"name": "维修维护",
								"value": 18
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);


				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "在线",
								"value": 50
							}, {
								"name": "离线",
								"value": 30
							}]
						}]
					};
					this.ringData = JSON.parse(JSON.stringify(res));
				}, 500);


			},
		}
	};
</script>
<style lang="scss">
	@import '../../../common/uni.css';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.uni-title {
		font-size: 30rpx;
		color: #333333;
		padding: 10px;
		background: #fff;
		border-top: 1px solid #ededed;
		margin-top: 20rpx;
	}

	.uni-media-list {
		padding: 15px 15px;

	}

	.uni-media-list-body {
		height: 42px;
		padding-left: 20rpx;
	}

	.uni-media-list-text-top {
		height: 40rpx;
		overflow: hidden;
		width: 100%;
		line-height: 40rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.uni-media-list-text-bottom {
		width: 100%;
		line-height: 24rpx;
		font-size: 26rpx;
		color: #666666;

		span {
			margin-right: 10rpx;
		}
	}

	.container {
		padding: 0 48rpx;

		.head-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			padding: 30rpx 0;
		}

	}

	.grid {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;

		.grid-text {
			font-size: 28rpx;
			margin-top: 28rpx;
			color: $u-type-info;
		}

	}

	.charts-box {
		width: 100%;
		height: 600rpx;
	}
</style>